<template>
  <view class="product">
    <view v-for="(item, index) in productList" :key="index" class="product-box">
      <template v-if="item.ch.length">
        <navigator :url="`/pages/subpackages/product/index/official?index=${index}`" open-type="navigate" hover-class="none" class="title u-flex u-row-between">
          <view class="name u-font-30">{{item.title || ""}}</view>
          <view class="more u-font-26 u-flex">
            查看更多
            <u-icon name="arrow-right" color="#999"></u-icon>
          </view>
        </navigator>
        <view class="list u-m-t-20 u-flex u-flex-wrap u-row-between">
          <navigator :url="`/pages/subpackages/product/detail/official?id=${its.id}`" open-type="navigate" hover-class="none" class="item" v-for="(its, ind) in item.ch" :key="ind">
            <!-- <u-image :src="its.image" mode="aspectFill" width="100%" height="280"></u-image> -->
            <view :style="'background-image:url(' + its.image + ')'" class="image u-flex u-col-center u-row-center">
              <!-- <view class="name">{{its.fuwu_id || ""}}</view> -->
            </view>
            <view class="info">
              <view class="name u-line-1">
                <u-tag v-if="its.nickname" :text="its.nickname || ''" bg-color="#389bf2" color="#fff" border-color="#fff" />
                <text class="u-m-l-10">{{its.fuwu_id || ""}}</text>
              </view>
              <view class="money u-flex">
                <view class="present">￥<text class="text">{{its.money || ""}}</text></view>
                <view class="primary u-m-l-10 u-font-26">￥<text class="text">{{its.vip_money || ""}}</text></view>
              </view>
              <view class="number u-font-26 u-text-right">
                <text v-if="its.num > 10000">1万+</text>
                <text v-else>{{its.num || 0}}</text>
                人已购买
              </view>
              <slot v-bind:info="its"></slot>
            </view>
          </navigator>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  name: "product-list",
  data() {
    return {};
  },
  props: {
    // 用户id
    uid: {
      type: String,
      default: "",
    },
    // 产品列表
    productList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.product {
  &-box {
    &:nth-child(n + 2) {
      margin: 30rpx 0 0;
    }
  }

  .title {
    .more {
      color: $uni-text-color-grey;
    }
  }

  .list {
    .item {
      flex: 0 0 48%;

      border-radius: 10rpx;
      box-shadow: 0 0 5px $uni-border-color;
      overflow: hidden;

      &:nth-child(n + 3) {
        margin: 30rpx 0 0;
      }

      .image {
        width: 100%;
        height: 240rpx;
        background-size: cover;
        background-position: center;
      }
    }

    .info {
      padding: 20rpx 10rpx;
      background-color: $uni-bg-color;
    }

    .money {
      margin: 10rpx 0;

      .primary {
        color: $uni-text-color-grey;
        text-decoration: line-through;
      }
    }

    .present {
      font-size: 30rpx;
      font-weight: bold;
      color: $uni-text-color-main-red;

      .text {
        font-size: 50rpx;
      }
    }

    .number {
      color: $uni-text-color-grey;
    }
  }
}
</style>
